<!-- 消防检查 -->
<template>
  <view class="page">
    <mescroll-body
        class="bttms_scroll"
        ref="mescrollRef"
        @init="mescrollInit"
        :down="downOption"
        @down="downCallback"
        @up="upCallback"
    >
      <view class="bd-info" v-for="(item,index) in dataList" :key="index"   @click="navTo('/pageSecurity/elevMaintenance/elevMaintenanceInfo',item)">
        <view class="col">
          <text>{{item.deviceAddr}} | {{ item.deviceCode }}</text>
          <view class="wxbtn" :style="{background:btnColor(item),color:txtColor(item)}"> {{item.result}}</view>
        </view>
        <view class="col">
          <text class="date">{{ item.maintenanceDate}}</text>
          <text style="color: #666">
            {{ item.maintenanceType }} | 维保人：{{item.maintenanceMan}}
          </text>
        </view>
      </view>
    </mescroll-body>

    <view class="xb-bottom-btn" @click="navTo('/pageSecurity/elevMaintenance/elevMaintenanceForm')">
      <u-icon name="plus" class="icon"></u-icon>
      <text>添加维保记录</text>
    </view>

  </view>
</template>

<script>
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
  mixins:[
    MescrollMixin
  ],
  data() {
    return {
      dataList:[],
      downOption: {
        page: {
          num: 0,
          size: 10,
          time: null,
        },
        auto: false, //是否在初始化后,自动执行downCallback; 默认true
      },
    };
  },
  computed: {
    txt() {
      return (val) => {
        let txt = "正常"
        if (val % 2 == 0) {
          txt = "故障"
        } else if (val % 3 == 0) {
          txt = "停用"
        }
        return txt
      }
    },
    txtColor() {
      return (val) => {
        let color = "rgba(68, 217, 75, 1)"
        if (val.result == '故障') {
          color = "rgba(247, 77, 57, 1)"
        } else if (val.result == '正常') {
          color = `rgba(68, 217, 75, 1)`
        }
        return color
      }
    },
    btnColor() {
      return (val) => {
        let opacity = '0.15'
        let color = `rgba(68, 217, 75, ${opacity})`
        if (val.result == '故障') {
          color = `rgba(247, 77, 57, ${opacity})`
        } else if (val.result == '正常') {
          color = `rgba(68, 217, 75, ${opacity})`
        }
        return color
      }
    }
  },
  methods:{
    downCallback(){
      this.dataList = []
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      //联网加载数据
      this.apis.securityApi
          .afMaintenanceList({
            pageNum: page.num,
            pageSize: page.size,
          })
          .then((res) => {
            this.dataList = this.dataList.concat(res.rows);
            this.mescroll.endBySize(res.rows.length, res.total);
          })
          .catch(() => {
            //联网失败的回调,隐藏下拉刷新的状态
            this.mescroll.endErr();
          });
    }
  }
}
</script>

<style lang="scss">
.page{
  padding-bottom: 112upx;
}
.wxbtn {
  display: inline-block;
  font-size: 24upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #44D94B;
  line-height: 34upx;
  padding: 4upx 10upx;
  background: rgba(#44D94B, 0.15);
}

.date {
  font-size: 26upx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #999999;
}

.xb-bottom-btn {
  // background: #FFFFFF;
  // color: #44D94B;
  .icon{
    margin-right: 10upx;
  }
}
</style>
